<template>
  <div>
    <!-- title -->
    <h2>数据字典</h2>

    <Divider />

    <Layout>
      <Sider hide-trigger :width="320">
        <div class="button-container margin-bottom-8">
          <Button type="primary" icon="md-add"
                  @click="openCreateTypeModal">添加字典分类</Button>
        </div>

        <CellGroup @on-click="clickDictType">
          <Cell v-for="item in dictTypes"
                :title="item.typeName"
                :label="item.typeCode"
                :name="item.typeCode"
                :key="item.typeCode"
                :selected="item.selected">
            <ButtonGroup v-if="hasPermission"
                         slot="extra" vertical>
              <Button v-if="hasPermissionEdit"
                      type="text" size="small"
                      style="color: #2d8cf0"
                      @click.native="openUpdateTypeModal(item.id)">编辑</Button>
              <Button v-if="hasPermissionDelete"
                      type="text" size="small"
                      style="color: #ed4014"
                      @click="delType(item.id)">删除</Button>
            </ButtonGroup>
          </Cell>
        </CellGroup>
      </Sider>
      <Content class="dict-container">
        <div class="button-container margin-bottom-8">
          <Button type="primary" icon="md-add"
                  @click="openCreateDictModal">添加字典</Button>
        </div>

        <Table stripe
               :columns="table.columns"
               :data="table.data"
               :loading="table.loading">
          <template slot="action" slot-scope="{ row }">
            <div class="button-container">
              <Button v-if="hasPermissionEdit"
                      type="primary" size="small"
                      @click="openUpdateDictModal(row.id)">编辑</Button>
              <Button v-if="hasPermissionDelete"
                      type="error" size="small"
                      @click="delDict(row.id)">删除</Button>
            </div>
          </template>
        </Table>
      </Content>
    </Layout>

    <CreateType ref="createTypeModal" @success="initData"></CreateType>
    <UpdateType ref="updateTypeModal" @success="initData"></UpdateType>
    <CreateDict ref="createDictModal" @success="initDict"></CreateDict>
    <UpdateDict ref="updateDictModal" @success="initDict"></UpdateDict>
  </div>
</template>

<script>
import CreateType from './components/createType.vue';
import UpdateType from './components/updateType.vue';
import CreateDict from './components/createDict.vue';
import UpdateDict from './components/updateDict.vue';

import { getDictTypes, deleteType } from '../../../apis/system/dictType';
import { getDictByCode, deleteDict } from '../../../apis/system/dict';

export default {
  name: 'index',
  components: {
    CreateType,
    UpdateType,
    CreateDict,
    UpdateDict
  },
  data() {
    const columns = [
      {
        title: '名称',
        key: 'name'
      },
      {
        title: '值',
        key: 'value'
      },
      {
        title: '排序',
        key: 'sort'
      }
    ];

    if (this.$permission.hasPermissions(['system:dict:edit', 'system:dict:delete'])) {
      columns.push({
        title: '操作',
        slot: 'action',
        width: 180
      });
    }

    return {
      dictTypes: [],
      typeCode: '',
      table: {
        columns,
        data: [],
        loading: false,
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.initData();
    },
    initData() {
      getDictTypes((responseData) => {
        this.dictTypes = responseData;
      });
    },
    clickDictType(name) {
      this.typeCode = name;
      let index = 0;
      this.$lodash.forEach(this.dictTypes, (item, i) => {
        item.selected = false;
        if (item.typeCode === name) {
          index = i;
        }
      });
      const dictType = this.$lodash.find(this.dictTypes, item => item.typeCode === name);
      dictType.selected = true;
      this.$set(this.dictTypes, index, dictType);

      this.initDict();
    },
    initDict() {
      if (this.typeCode === '') {
        return;
      }

      this.table.loading = true;
      getDictByCode(this.typeCode, (responseData) => {
        this.table.loading = false;

        this.table.data = responseData;
      }, () => {
        this.table.loading = false;
      });
    },
    openCreateTypeModal() {
      this.$refs.createTypeModal.openModal();
    },
    openUpdateTypeModal(id) {
      this.$refs.updateTypeModal.openModal(id);
    },
    delType(id) {
      this.$Modal.confirm({
        title: '提示',
        content: '此操作将永久删除该数据，是否继续？',
        loading: true,
        onOk: () => {
          deleteType(id, () => {
            this.$Modal.remove();
            this.$Message.success('删除成功');
            this.initData();
            this.table.data = [];
          });
        }
      });
    },
    openCreateDictModal() {
      this.$refs.createDictModal.openModal(this.typeCode);
    },
    openUpdateDictModal(id) {
      this.$refs.updateDictModal.openModal(id);
    },
    delDict(id) {
      this.$Modal.confirm({
        title: '提示',
        content: '此操作将永久删除该数据，是否继续？',
        loading: true,
        onOk: () => {
          deleteDict(id, () => {
            this.$Modal.remove();
            this.$Message.success('删除成功');
            this.initDict();
          });
        }
      });
    }
  },
  computed: {
    hasPermission() {
      return this.$permission.hasPermissions(['system:dict:edit', 'system:dict:delete']);
    },
    hasPermissionEdit() {
      return this.$permission.hasPermissions(['system:dict:edit']);
    },
    hasPermissionDelete() {
      return this.$permission.hasPermissions(['system:dict:delete']);
    },
  },
};
</script>

<style scoped lang="less">
  .dict-container {
    background: #ffffff;
    border-left: 1px solid #e8e8e8;
    padding-left: 20px;
  }

  .ivu-cell {
    padding: 14px 16px;
  }
</style>
